<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟面试系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .app-container {
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .card-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
        }
        .card-body {
            padding: 20px;
        }
        .upload-area {
            border: 2px dashed #d9d9d9;
            border-radius: 6px;
            padding: 40px;
            text-align: center;
            background: #fafafa;
            transition: border-color 0.3s;
        }
        .upload-area:hover {
            border-color: #409eff;
        }
        .question-card {
            border-left: 4px solid #409eff;
            margin-bottom: 15px;
        }
        .answer-input {
            margin-top: 10px;
        }
        .score-display {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .score-number {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .feedback-text {
            background: #f0f9ff;
            border: 1px solid #b3d8ff;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="app-container">
            <div class="header">
                <h1>模拟面试系统</h1>
                <p>基于RAG知识库的智能面试评估</p>
            </div>
            
            <div class="main-content">
                <!-- 知识库管理 -->
                <div class="card">
                    <div class="card-header">
                        <h3>知识库管理</h3>
                    </div>
                    <div class="card-body">
                        <el-upload
                            class="upload-area"
                            :action="uploadUrl"
                            :headers="uploadHeaders"
                            :on-success="handleUploadSuccess"
                            :on-error="handleUploadError"
                            :before-upload="beforeUpload"
                            drag>
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                将文件拖到此处，或<em>点击上传</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持 .txt, .docx 格式文件
                                </div>
                            </template>
                        </el-upload>
                        
                        <el-table :data="documents" style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="title" label="文档标题"></el-table-column>
                            <el-table-column prop="file_type" label="文件类型"></el-table-column>
                            <el-table-column prop="created_at" label="上传时间">
                                <template #default="scope">
                                    {{ formatDate(scope.row.created_at) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button type="danger" size="small" @click="deleteDocument(scope.row.id)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                
                <!-- 面试会话管理 -->
                <div class="card">
                    <div class="card-header">
                        <h3>面试会话管理</h3>
                    </div>
                    <div class="card-body">
                        <el-button type="primary" @click="showCreateSession = true">
                            创建新会话
                        </el-button>
                        
                        <el-table :data="sessions" style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="session_name" label="会话名称"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template #default="scope">
                                    <el-tag :type="getStatusType(scope.row.status)">
                                        {{ getStatusText(scope.row.status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="total_score" label="总分">
                                <template #default="scope">
                                    {{ scope.row.total_score ? (scope.row.total_score * 100).toFixed(1) + '%' : '-' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="created_at" label="创建时间">
                                <template #default="scope">
                                    {{ formatDate(scope.row.created_at) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button type="primary" size="small" @click="startInterview(scope.row)">
                                        开始面试
                                    </el-button>
                                    <el-button type="success" size="small" @click="viewResults(scope.row)">
                                        查看结果
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                
                <!-- 创建会话对话框 -->
                <el-dialog v-model="showCreateSession" title="创建面试会话" width="500px">
                    <el-form :model="newSession" label-width="100px">
                        <el-form-item label="会话名称">
                            <el-input v-model="newSession.session_name" placeholder="请输入会话名称"></el-input>
                        </el-form-item>
                        <el-form-item label="选择文档">
                            <el-select v-model="newSession.document_ids" multiple placeholder="选择知识库文档" style="width: 100%;">
                                <el-option
                                    v-for="doc in documents"
                                    :key="doc.id"
                                    :label="doc.title"
                                    :value="doc.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="showCreateSession = false">取消</el-button>
                            <el-button type="primary" @click="createSession">创建</el-button>
                        </span>
                    </template>
                </el-dialog>
                
                <!-- 面试界面 -->
                <div v-if="currentSession" class="card">
                    <div class="card-header">
                        <h3>面试进行中 - {{ currentSession.session_name }}</h3>
                    </div>
                    <div class="card-body">
                        <div v-if="currentQuestion" class="question-card">
                            <h4>问题 {{ currentQuestionIndex + 1 }} / {{ questions.length }}</h4>
                            <p>{{ currentQuestion.question_text }}</p>
                            
                            <div class="answer-input">
                                <el-input
                                    v-model="currentAnswer"
                                    type="textarea"
                                    :rows="4"
                                    placeholder="请输入您的答案..."
                                ></el-input>
                                <el-button type="primary" @click="submitAnswer" style="margin-top: 10px;">
                                    提交答案
                                </el-button>
                            </div>
                        </div>
                        
                        <div v-if="showEvaluation" class="score-display">
                            <div class="score-number">{{ (evaluation.overall_score * 100).toFixed(1) }}%</div>
                            <p>综合评分</p>
                            <div class="feedback-text">
                                <h4>详细反馈：</h4>
                                <p>{{ evaluation.feedback }}</p>
                                <p><strong>相似度分数：</strong>{{ (evaluation.similarity_score * 100).toFixed(1) }}%</p>
                                <p><strong>质量分数：</strong>{{ (evaluation.quality_score * 100).toFixed(1) }}%</p>
                            </div>
                            <el-button type="primary" @click="nextQuestion" style="margin-top: 15px;">
                                {{ currentQuestionIndex + 1 >= questions.length ? '完成面试' : '下一题' }}
                            </el-button>
                        </div>
                    </div>
                </div>
                
                <!-- 面试结果 -->
                <div v-if="showResults" class="card">
                    <div class="card-header">
                        <h3>面试结果</h3>
                    </div>
                    <div class="card-body">
                        <div class="score-display">
                            <div class="score-number">{{ (results.average_score * 100).toFixed(1) }}%</div>
                            <p>最终得分</p>
                        </div>
                        
                        <div v-for="(result, index) in results.results" :key="index" class="question-card">
                            <h4>问题 {{ index + 1 }}：{{ result.question.question_text }}</h4>
                            <p><strong>您的答案：</strong>{{ result.answer ? result.answer.answer_text : '未回答' }}</p>
                            <p><strong>得分：</strong>{{ (result.score * 100).toFixed(1) }}%</p>
                            <div v-if="result.answer" class="feedback-text">
                                <p><strong>反馈：</strong>{{ result.answer.feedback }}</p>
                            </div>
                        </div>
                        
                        <el-button type="primary" @click="backToSessions">返回会话列表</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
</body>
</html>



